<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3demo</title>
    <link rel="stylesheet" href="/node_modules/c3/c3.min.css">
    <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>

    <script src="/node_modules/c3/c3.min.js"></script>
    <style>
        .container {
            width: 1300px;
            margin: 0 auto;
        }

        .table {
            width: 100%;
        }

        .table div {
            float: left;
            width: 40%;
        }

        .table span {
            width: 10%;
            float: left;
            z-index: 100;
        }

        span button {
            margin: 10px;
            width: 50%;
            display: block;
        }

        /* #chart .c3-line-data2 {
            stroke-width: 5px;
        } */
    </style>
</head>

<body>
    <div id="app" class="container">
        <h1>Demo</h1>

        <hr>
        <div class="table">
            <span>
                <button onclick="loadData()">Load</button>
            </span>
            <div id="chart"></div>
            <span>
                <button onclick="hideData()">Hide</button>
                <button onclick="showData()">Show</button>
            </span>
            <div id="chart2"></div>
            <hr>

            <div style="width:100%;margin-left:100px;">
                <div id="chart3"></div>
                <div id="chart4"></div>
                <span>
                    <button onclick="runC4()">play</button>
                </span>
            </div>
            <hr>
            <div id="chart5"></div>
            <span>
                <button onclick="runC5()">play</button>
            </span>
            <div id="chart6"></div>
            <span>
                <button onclick="runC6()">play</button>
            </span>

        </div>
    </div>

</body>
<script>
    // chart1
    let chart = c3.generate({
        bindto: '#chart',
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ]
        }
    });
    // 2. url: 'https://c3js.org/data/c3_test.csv'

    // 3. json: {
    //         data1: [30, 20, 50, 40, 60, 50],
    //         data2: [200, 130, 90, 240, 130, 220],
    //     }
    function loadData() {
        chart.load({
            columns: [
                ['data3', 500, 100, 750, 450, 330, 510, 500],
            ]
        });
    }



    // *** *** *** 
    // chart2

    let chart2 = c3.generate({
        bindto: '#chart2',
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ],
            axes: {
                data2: 'y2' // ADD
            }
        },
        axis: {
            y2: {
                show: true // ADD
            }
        }
    });

    function hideData() {
        chart2.hide(['data1'])
    }

    function showData() {
        chart2.show(['data1'])
    }
    // *** *** *** 
    // chart3
    let chart3 = c3.generate({
        bindto: '#chart3',
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ],
            axes: {
                data2: 'y2'
            },
            types: {
                data2: 'bar' // ADD
            }
        },
        axis: {
            y: {
                label: {
                    text: 'Y Label',
                    position: 'outer-middle'
                }
            },
            y2: {
                show: true,
                label: {
                    text: 'Y2 Label',
                    position: 'outer-middle'
                }
            }
        }
    });
    // *** *** *** 
    // chart4
    let chart4 = c3.generate({
        bindto: '#chart4',
        data: {
            columns: [
                ['data1', -30, 200, 200, 400, -150, 250],
                ['data2', 130, 100, -100, 200, -150, 50],
                ['data3', -230, 200, 200, -300, 250, 250]
            ],
            type: 'bar',
            groups: [
                ['data1', 'data2']
            ]
        },
        grid: {
            y: {
                lines: [{
                    value: 0
                }]
            }
        }
    });
    function runC4() {
        setTimeout(function () {
            chart4.groups([
                ['data1', 'data2', 'data3']
            ])
        }, 1000);

        setTimeout(function () {
            chart4.load({
                columns: [
                    ['data4', 100, -50, 150, 200, -300, -100]
                ]
            });
        }, 1500);

        setTimeout(function () {
            chart4.groups([
                ['data1', 'data2', 'data3', 'data4']
            ])
        }, 2000);
    }


    // *** *** *** 
    // chart5
    let chart5 = c3.generate({
        bindto: '#chart5',
        data: {
            xs: {
                setosa: 'setosa_x',
                versicolor: 'versicolor_x',
            },
            // iris data from R
            columns: [
                ["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4,
                    3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1,
                    4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3
                ],
                ["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9,
                    3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4,
                    2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8
                ],
                ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4,
                    0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1,
                    0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2
                ],
                ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3,
                    1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0,
                    1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3
                ],
            ],
            type: 'scatter'
        },
        axis: {
            x: {
                label: 'Sepal.Width',
                tick: {
                    fit: false
                }
            },
            y: {
                label: 'Petal.Width'
            }
        }
    });

    function runC5() {
        setTimeout(function () {
            chart5.load({
                xs: {
                    virginica: 'virginica_x'
                },
                columns: [
                    ["virginica_x", 3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0,
                        2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0,
                        2.8,
                        3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2,
                        3.3,
                        3.0, 2.5, 3.0, 3.4, 3.0
                    ],
                    ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1,
                        2.0,
                        2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1,
                        1.6,
                        1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5,
                        2.3,
                        1.9, 2.0, 2.3, 1.8
                    ],
                ]
            });
        }, 1000);

        setTimeout(function () {
            chart5.unload({
                ids: 'setosa'
            });
        }, 2000);

        setTimeout(function () {
            chart5.load({
                columns: [
                    ["virginica", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1,
                        0.1,
                        0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2,
                        0.2,
                        0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4,
                        0.3,
                        0.2, 0.2, 0.2, 0.2
                    ],
                ]
            });
        }, 3000);
    }

    // *** *** *** 
    // chart6
    let chart6 = c3.generate({
        bindto: '#chart6',
        data: {
            x: 'x',
            columns: [
                ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 130, 340, 200, 500, 250, 350]
            ]
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d'
                }
            }
        }
    });

    function runC6() {
        setTimeout(function () {
            chart6.load({
                columns: [
                    ['data3', 400, 500, 450, 700, 600, 500]
                ]
            });
        }, 1000);
        setTimeout(function () {
            chart6.load({
                columns: [
                    ['data4', 450, 550, 750, 600, 660, 500]
                ]
            });
        }, 2000);
        setTimeout(function () {
            chart6.load({
                columns: [
                    ['data5', 700, 600, 650, 500, 400, 500]
                ]
            });
        }, 3000);

    }
</script>

</html>